@import url(../../static/css/init.css);
@import url(../../static/css/public.css);
@import url(../../static/css/tabbar.css);
@import url(../../static/css/toptitle.css);
@import url(../../static/css/playlistbox.css);
@import url(../../static/css/menu.css);

.b-top-bar .me-download {
    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;
    margin-right: 2.5rem;
    background: url(../../static/icon/download_download.svg) no-repeat;
}

.b-tab-bar ul li {
    margin-right: calc(var(--marginLeft)*1px);
}

.b-tab-bar ul li.fail {
    margin-right: 0;
}

.b-play-list .box .top {
    position: relative;
}

.b-play-list .box .top i {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--main-red-400);
}

.box .option-icon .size {
    margin: 0 .8rem;
    color: var(--main-gray-500);
}

.box .option-icon .player-option {
    position: relative;
    width: 8rem;
    height: 2.4rem;
    border: .1rem solid var(--main-green-500);
    padding: 0;
    color: var(--main-white);
    text-align: center;
    line-height: 2.4rem;
}

.box .option-icon .player-option.paused {
    border: .1rem solid var(--main-green-300);
}

.box .option-icon .player-option::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    background: var(--main-green-500);
    height: inherit;
    width: calc(var(--progress)*1% + .1rem);
    border-radius: .4rem;
    transform: translate(-.1rem, -.1rem);
    z-index: -1;
}

.box .option-icon .player-option.paused::after {
    background: var(--main-green-300);
}

.option-icon .player-option .progress {
    display: none;
}

.option-icon .player-option.dowloading .progress {
    display: inline-block;
}

.option-icon .player-option .fa-pause {
    display: none;
}

.option-icon .player-option.paused .fa-pause {
    display: inline-block;
}

.option-icon .player-option svg {
    display: none;
}

.option-icon .player-option.success svg {
    display: inline-block;
}

.option-icon .player-option.success svg .tick {
    stroke-dasharray: 193;
    stroke-dashoffset: 193;
    animation: tick .6s ease-in forwards;
    animation-delay: .2s;
}

@keyframes tick {
    0% {
        stroke-dashoffset: 193;
    }

    100% {
        stroke-dashoffset: 167;
    }
}